<template>
    <div style="background-color: #2d3a4b;" class="flex justify-center items-center min-h-screen " >
    <el-form ref="ruleFormRef" :rules="rules" :model="form"  auto-complete="on"  class="login-form">

      <div >
        <h3 class="title">Register Form</h3>
      </div>

      <el-form-item prop="name" >
        <el-input 
          class="inputClass"  
          v-model="form.name"   
          ref="name"        
          placeholder="请输入用户名"
          clearable     
        >
        <template #prefix><el-icon ><UserFilled /></el-icon></template>
        </el-input>
      </el-form-item>
     
      <el-form-item prop="password">       
        <el-input 
          class="inputClass"
          ref="password"
          v-model="form.password" 
          placeholder="请输入密码"
          show-password
          clearable
        >
        <template #prefix><el-icon><GoodsFilled /></el-icon></template>
        
        </el-input>
       
      </el-form-item>

      <el-button :loading="loading" type="primary"  @click="onSubmit" style="height: 40px;width:100%;margin-bottom:30px;" >Register</el-button>
      <el-link style="display: flex;justify-content: flex-end;" :underline="false" type="info" href="/register">有账号？去登录</el-link>
     

    </el-form>
  </div>
</template>
<script setup>
import {ref, reactive,onMounted,onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '@/api/manager'

const loading = ref(false)

const router = useRouter()
const form = reactive({
    name: '',
    password: '',
    
})
const rules = ({
    name: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },  
  ],
  password: [
    { required: true, message: '用户密码不能为空', trigger: 'blur' },  
  ],
})

const ruleFormRef = ref(null)
const onSubmit = () => {
    console.log('submit!')
    ruleFormRef.value.validate((valid)=>{
        if(!valid){
            return false
        }
        loading.value = true
        register(form)
        loading.value = false
        router.push("/login")
        
      })
}
// 监听回车事件
function onKeyUp(e){
    if(e.key == "Enter") onSubmit()
}
document.addEventListener('keydown', (e) => {
	console.log(e)
  if(e.key=='Enter') onSubmit()
})
</script>

<style scoped>
:deep(.el-input__wrapper){
    border: 0!important; 
    background-color:#243143!important;
    border: 1px solid #2d3a4b!important;
    box-shadow:0 0 0 0!important;
    
}
:deep(.is-focus){
    border: 1px solid #3c4e64!important;
   
}
/* el-input el-input--prefix */
:deep(.el-input){
    border: 1px solid #314056!important;
    @apply text-sm!important;
  
}
.inputClass{
  height: 50px;font-size: 18px ;
 
}
:deep(.el-input__inner){
  color:#eee!important;
  
}
:deep(.login-form){
  padding: 0px 0px 0!important;
  
}

.login-form {
  width: 420px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: -80px;
}
.title {
  font-size: 26px;
  color: #eee;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}


</style>